@import "./common/mixin.styl"

html,body
  width 100%
  height 100%
  background rgb(252,252,252)
  overflow-x hidden
  overflow-y auto
  -webkit-overflow-scrolling touch
  .index-wrapper
    padding-top computedNum(52)
    .header-wrapper
      position fixed
      top 0
      left 0
      background rgb(252,252,252)
      z-index 9
      height computedNum(52)
      padding 0 computedNum(21.5) 0 computedNum(24)
      font-size 0
      .sex-wrapper
        div
          font-size computedNum(15)
          color rgb(153,153,153)
          height computedNum(52)
          line-height computedNum(52)
          &.active
            color rgb(250,71,71)
            font-size computedNum(16)
            .line
              left computedNum(4)
              bottom computedNum(0)
              width computedNum(24)
              height computedNum(3)
              background rgb(250,71,71)
              border-radius computedNum(3)
        .male-btn
          margin-left computedNum(24.5)
      .search-wrapper
        width computedNum(150)
        height computedNum(14)
        background rgb(240,240,240)
        margin-left computedNum(80)
        padding computedNum(6) computedNum(0) computedNum(8) computedNum(12.5)
        color rgb(153,153,153)
        font-size computedNum(12)
        border-radius computedNum(14)
        .search-icon
          width computedNum(16)
          height computedNum(17)
          bottom computedNum(5)
          right computedNum(15)
          background url("../img/search-icon.png") no-repeat center center
          background-size computedNum(16) computedNum(17)
      .book-shelf-btn-wrapper
        font-size computedNum(15)
        margin-left computedNum(15)
    .banner-wrapper
      img
        width 100%
        vertical-align bottom
        pointer-events none
      .swiper-pagination-bullet
        background rgb(154,171,178)
        opacity 1
      .swiper-pagination-bullet-active
        width computedNum(15)
        height computedNum(7)
        background #ffffff
        border-radius computedNum(4)
        position relative
        top computedNum(-1)
    .broadcast-wrapper
      font-size 0
      height computedNum(16)
      padding computedNum(17) 0 computedNum(15) computedNum(20)
      .title
        width computedNum(66)
        height computedNum(16)
        background url("../img/broadcast-title.png") no-repeat center center
        background-size computedNum(66) computedNum(16)
      .broadcast
        margin-left computedNum(15)
        width computedNum(274)
        height computedNum(16)
        vertical-align top
        overflow hidden
        .swiper-container
          p
            height computedNum(16)
            color rgb(186,129,14)
            font-size computedNum(12)
    .tab-wrapper
      padding computedNum(15) computedNum(42.5)
      font-size 0
      li
        font-size computedNum(13)
        width computedNum(50)
        margin-right computedNum(30)
        div
          height computedNum(40)
        p
          margin-top computedNum(10)
      .recharge
        div
          background url("../img/recharge-icon.png") no-repeat center center
          background-size computedNum(35.5) computedNum(37)
      .limit
        div
          background url("../img/limit-icon.png") no-repeat center center
          background-size computedNum(40) computedNum(39.5)
      .vip
        div
          background url("../img/rank-icon.png") no-repeat center center
          background-size computedNum(42) computedNum(34)
      .sign
        margin-right 0
        div
          background url("../img/sign-icon.png") no-repeat center center
          background-size computedNum(27) computedNum(37)
    .select-wrapper
      padding computedNum(20) computedNum(20)
      font-size 0
      .left-wrapper
        vertical-align top
        width computedNum(129)
        .title
          h2
            font-size computedNum(17)
            margin-bottom computedNum(8)
            width:computedNum(105)
            height:computedNum(30)
            background url("../img/jinbao.png") no-repeat center center
            background-size computedNum(105) auto
          p
            font-size computedNum(12)
            color #666666
            margin-bottom computedNum(10)
            width 100%
            overflow hidden
            text-overflow ellipsis
            white-space nowrap
        .cover
          width computedNum(129)
          height computedNum(163)
          box-shadow 1px 1px 10px 1px #ccc
      .right-wrapper
        margin-left computedNum(56)
        width computedNum(150)
        .top-wrapper
          margin-bottom computedNum(20)
          .title
            h2
              font-size computedNum(13)
              margin-bottom computedNum(8)
              width 100%
              overflow hidden
              text-overflow ellipsis
              white-space nowrap
            p
              font-size computedNum(12)
              color #666666
              margin-bottom computedNum(8)
              width 100%
              overflow hidden
              text-overflow ellipsis
              white-space nowrap
          .cover
            width computedNum(150)
        .bottom-wrapper
          .title
            h2
              font-size computedNum(13)
              margin-bottom computedNum(8)
              width 100%
              overflow hidden
              text-overflow ellipsis
              white-space nowrap
            p
              font-size computedNum(12)
              color #666666
              margin-bottom computedNum(8)
              width 100%
              overflow hidden
              text-overflow ellipsis
              white-space nowrap
          .cover
            width computedNum(150)
    .recommend-wrapper
      padding computedNum(20) computedNum(20) computedNum(15) computedNum(20)
      .header
        .title
          font-size 0
          margin-bottom computedNum(19)
          .title-icon
            width computedNum(18)
            height computedNum(19)
            background url("../img/recomend-icon.png") no-repeat center center
            background-size computedNum(18) computedNum(19)
            margin-right computedNum(20)
          span
            font-size computedNum(17)
            vertical-align top
      .recommend-content
        font-size 0
        li
          margin-right computedNum(17)
          vertical-align top
          &:last-child
            margin-right computedNum(0)
          div
            width computedNum(100)
            height computedNum(127)
            box-shadow 1px 1px 10px 1px #ccc
          p
            font-size computedNum(13)
            margin-top computedNum(10)
            width computedNum(100)
            overflow hidden
            text-overflow ellipsis
            display -webkit-box
            -webkit-box-orient vertical
            -webkit-line-clamp 2
        .swiper-container
          overflow initial
          .recommend-pagination
            top computedNum(-33)
            left computedNum(255)
            width computedNum(100)
            height computedNum(10)
            .swiper-pagination-bullet
              width computedNum(11)
              height computedNum(2.5)
              background #cccccc
              opacity 1
              border-radius 0
            .swiper-pagination-bullet-active
              background rgb(248,97,97)
              height computedNum(4)
              border-radius computedNum(4)
              position relative
              top computedNum(0)
      .left-mask
        left 0
        top computedNum(55)
        width computedNum(20)
        height computedNum(174)
        background rgb(252,252,252)
        z-index 9
      .right-mask
        right 0
        top computedNum(55)
        width computedNum(20)
        height computedNum(174)
        background rgb(252,252,252)
        z-index 9
    .hot-wrapper,.new-wrapper
      padding computedNum(20) computedNum(20) computedNum(15) computedNum(20)
      .header
        margin-bottom computedNum(19)
        .title
          font-size 0
          .title-icon
            width computedNum(20)
            height computedNum(20)
            background url("../img/hot-icon.png") no-repeat center center
            background-size computedNum(16) computedNum(19)
            margin-right computedNum(20)
            &.new-title-icon
              background url("../img/new-icon.png") no-repeat center center
              background-size computedNum(20) computedNum(20)
          span
            font-size computedNum(17)
            vertical-align top
        .more
          font-size computedNum(13)
          color #f86161
          height computedNum(22)
          line-height computedNum(22)
          .more-icon
            width computedNum(7)
            height computedNum(21)
            background url("../img/more-icon.png") no-repeat center center
            background-size computedNum(7) computedNum(12)
            margin-left computedNum(5)
            vertical-align top
      .same-content
        li
          font-size 0
          margin-bottom computedNum(23)
          &:last-child
            margin-bottom computedNum(0)
          .book-cover
            width computedNum(96)
            height computedNum(122)
            box-shadow 1px 1px 10px 1px #ccc
          .book-detail
            margin-left computedNum(12)
            width computedNum(227)
            vertical-align top
            .book-name
              font-size computedNum(16)
              margin-bottom computedNum(10)
            .book-desc
              font-size computedNum(13)
              color rgb(102,102,102)
              line-height computedNum(20)
              margin-bottom computedNum(14.5)
              text-align justify
              overflow hidden
              text-overflow ellipsis
              display -webkit-box
              -webkit-box-orient vertical
              -webkit-line-clamp 3
              .status
                color rgb(99,159,241)
                &.finish
                  color rgb(245,186,153)
            .cat-and-click
              .cat-wrapper
                font-size computedNum(11)
                color #999999
                span
                  display inline-block
                  padding computedNum(2) computedNum(3)
                  line-height computedNum(17)
                  border-1px-all(#999999)
                  vertical-align top
                  margin-right computedNum(7)
                  &:after
                    border-radius computedNum(8)
              .click-wrapper
                .click-icon
                  width computedNum(16)
                  height computedNum(22)
                  background url("../img/click-icon.png") no-repeat center center
                  background-size computedNum(16) computedNum(10)
                  vertical-align top
                .click
                  font-size computedNum(11)
                  color #f8a2a2
                  height computedNum(22)
                  line-height computedNum(24)
                  margin-left computedNum(4)
    //.limit-wrapper
    //  padding computedNum(20) computedNum(20) computedNum(15) computedNum(20)
    //  .header
    //    margin-bottom computedNum(19)
    //    .title
    //      font-size 0
    //      span
    //        font-size computedNum(17)
    //        vertical-align top
    //      .timer-wrapper
    //        margin-left computedNum(25)
    //        .timer-icon
    //          width computedNum(17)
    //          height computedNum(22)
    //          background url("../img/timer-icon.png") no-repeat center center
    //          background-size computedNum(17) computedNum(17)
    //          vertical-align top
    //        .count-wrapper
    //          height computedNum(22)
    //          line-height computedNum(24)
    //          font-size computedNum(15)
    //          color #f73636
    //          margin-left computedNum(7)
    //    .more
    //      font-size computedNum(13)
    //      color #f86161
    //      height computedNum(22)
    //      line-height computedNum(22)
    //      .more-icon
    //        width computedNum(7)
    //        height computedNum(21)
    //        background url("../img/more-icon.png") no-repeat center center
    //        background-size computedNum(7) computedNum(12)
    //        margin-left computedNum(5)
    //        vertical-align top
    //  .limit-content
    //    font-size 0
    //    li
    //      margin-right computedNum(17)
    //      vertical-align top
    //      &:last-child
    //        margin-right computedNum(0)
    //      div
    //        width computedNum(100)
    //        height computedNum(127)
    //      p
    //        font-size computedNum(13)
    //        margin-top computedNum(10)
    //        width computedNum(100)
    //        overflow hidden
    //        text-overflow ellipsis
    //        display -webkit-box
    //        -webkit-box-orient vertical
    //        -webkit-line-clamp 2
    .like-wrapper
      padding computedNum(20) computedNum(20) computedNum(0) computedNum(20)
      .header
        margin-bottom computedNum(19)
        .title
          font-size 0
          .title-icon
            width computedNum(20)
            height computedNum(23)
            background url("../img/like-icon.png") no-repeat center center
            background-size computedNum(19) computedNum(18)
            margin-right computedNum(20)
          span
            font-size computedNum(17)
            vertical-align top
        .more
          font-size computedNum(13)
          color #f86161
          height computedNum(22)
          line-height computedNum(22)
          .more-icon
            width computedNum(12)
            height computedNum(21)
            background url("../img/refresh-icon.png") no-repeat center center
            background-size computedNum(12) computedNum(12)
            margin-left computedNum(5)
            vertical-align top
      .like-content
        font-size 0
        li
          margin 0 computedNum(17) computedNum(20) 0
          vertical-align top
          &:nth-child(3n)
            margin-right computedNum(0)
          div
            width computedNum(100)
            height computedNum(127)
            box-shadow 1px 1px 10px 1px #ccc
          p
            font-size computedNum(13)
            margin-top computedNum(10)
            width computedNum(100)
            overflow hidden
            text-overflow ellipsis
            display -webkit-box
            -webkit-box-orient vertical
            -webkit-line-clamp 2
    .contact-wrapper
      padding computedNum(20) computedNum(55) computedNum(75) computedNum(45)
      font-size 0
      .left-wrapper
        width computedNum(115)
        margin-right computedNum(75)
        font-size computedNum(13)
        .time-and-qq
          color rgb(153,153,153)
        .p1
          margin-bottom computedNum(6)
        .p2
          margin-bottom computedNum(10)
        .p3
          margin-bottom computedNum(6)
        .p4
          margin-bottom computedNum(10)
      .right-wrapper
        vertical-align top
        width computedNum(84)
        p
          color rgb(153,153,153)
          font-size computedNum(11)
          margin-bottom computedNum(4)
        .qrcode-wrapper
          width computedNum(83)
          height computedNum(83)
    .bottom-nav-wrapper
      border-1px-top(rgb(226,226,226))
      position fixed
      bottom 0
      left 0
      width 100%
      padding computedNum(6) computedNum(35)
      font-size 0
      background #ffffff
      z-index 9
      li
        width computedNum(50)
        font-size computedNum(11)
        color #666666
        margin-right computedNum(35)
        text-align center
        &:last-child
          margin-right 0
        &.index-li
          color #fa4747
        div
          width computedNum(50)
          height computedNum(38)
        .shelf-icon-wrapper
          background url("../img/shelf-icon.png") no-repeat center center
          background-size computedNum(19.5) computedNum(22.5)
        .index-icon-wrapper
          background url("../img/index-icon-active.png") no-repeat center center
          background-size computedNum(23) computedNum(22)
        .rank-icon-wrapper
          background url("../img/cat-icon.png") no-repeat center center
          background-size computedNum(23) computedNum(23)
        .mine-icon-wrapper
          background url("../img/mine-icon.png") no-repeat center center
          background-size computedNum(22) computedNum(22)
    .new-sign-wrapper
      position fixed
      top 0
      left 0
      width 100%
      height 100%
      background rgba(0,0,0,0.6)
      z-index 99
      display none
      .new-sign-content
        top computedNum(70)
        left computedNum(33.5)
        width computedNum(308)
        height computedNum(406)
        background url("../img/new-sign-bg.png") no-repeat center center
        background-size computedNum(308) computedNum(406)
        .new-sign-title
          margin-top computedNum(73)
          font-size computedNum(17)
          color #111313
        .new-sign-get
          width computedNum(210)
          margin computedNum(20) 0 0 computedNum(49)
          height computedNum(22)
          line-height computedNum(22)
          background #000000
          border-radius computedNum(11)
          color #ffffff
          font-family SimHei
          font-size computedNum(12)
          .active
            color rgb(255,204,65)
          .award-gift
            display none
        ul
          width computedNum(281)
          font-size 0
          margin computedNum(30) 0  0 computedNum(20)
          li
            width computedNum(70)
            vertical-align top
            margin-top computedNum(14)
            &:nth-child(5)
              margin-left computedNum(35)
            &:nth-child(4),&:nth-child(7)
              .right-icon
                opacity 0
            .day-detail-wrapper
              width computedNum(56)
              height computedNum(67)
              font-size computedNum(12)
              vertical-align top
              background #e8ecf0
              border-radius computedNum(3)
              .day-detail
                width computedNum(56)
                height computedNum(67)
                background url("../img/sign-coin.png") no-repeat center center
                background-size computedNum(28) computedNum(28)
                &.has-gift
                  background url("../img/sign-gift.png") no-repeat center center
                  background-size computedNum(62) auto
                .day-num
                  width computedNum(20)
                  height computedNum(20)
                  line-height computedNum(20)
                  text-align center
                  font-size computedNum(16)
                  color #999999
                  font-weight bolder
                .award-detail
                  width 150%
                  bottom computedNum(2)
                  left -24%
                  color #f9754c
                  transform scale(0.7)
                  -webkit-transform scale(0.7)
                  transform-origin center center
                  -webkit-transform-origin center center
                  &.signed
                    color #666666
            .right-icon
              width computedNum(14)
              height computedNum(67)
              background url("../img/next.png") no-repeat center center
              background-size computedNum(4) auto
              &.active
                background url("../img/next-active.png") no-repeat center center
                background-size computedNum(5) auto
        .confirm-btn
          width computedNum(220)
          height computedNum(34)
          line-height computedNum(35)
          color #ffffff
          font-size computedNum(13)
          font-family SimHei
          background #ff6050
          border-radius computedNum(17)
          margin computedNum(21) 0 0 computedNum(45)



